<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>年报催送</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<script src="__PUBLIC__/Tsnews/js/jweixin-1.1.0.js"></script>
	<script src="__PUBLIC__/Tsnews/js/jquery.js"></script>
	<link rel="stylesheet" href="__PUBLIC__/Tsnews/css/example.css"/>
	<link rel="stylesheet" href="__PUBLIC__/Tsnews/css/weui.min.css"/>
	<style>
		#nb{
			width:60%;
			height:145px;
			margin:0 auto;
			margin-top:5px;
		}
        .dep{
            border:1px solid green;
            border-radius: 4px;
            font-size: 12px;
            padding:4px;
            color:gray;
            text-align: center;
            position: relative;
            margin:6px auto;
        }
        .member{
            font-size: 10px;
            padding:4px;
            color:gray;
            display: block;
            float: left;
            margin:3px;
            text-align: center;
            position: relative;
        }
        .member img{
            width: 30px;
            height: 30px;
        }
	</style>
</head>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{$appid}', // 必填，企业号的唯一标识，此处填写企业号corpid
        timestamp: {$timestamp}, // 必填，生成签名的时间戳
        nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
        signature: '{$signature}',// 必填，签名，见附录1
        jsApiList: [
            'openEnterpriseContact',
			'hideOptionMenu',
			'closeWindow'
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

    wx.ready(function(){
       // alert('ok');
		wx.hideOptionMenu(); //隐藏又上角菜单
    });
    wx.error(function(res){
        alert('签名失败');
    });
	function close_window(){
		wx.closeWindow();
	}

    $(function(){
        //文本初始化
        var length = $('textarea[name=content]').val().length;
        $('#word_count').html(200 - length);
    })
</script>
<body>
<input type="hidden" id="userid" value="{$userid}">
<input type="hidden" id="zbmuserid" value="{$son_ids}">
	<!--弹窗提示区域开始-->
	<div style="display: none;" id="notice_msg">
	    <div class="weui-mask"></div>
	    <div class="weui-dialog">
	        <div class="weui-dialog__hd"><strong class="weui-dialog__title">温馨提示</strong></div>
	        <div class="weui-dialog__bd" id="msg_content">您还没有选择消息接收人</div>
	        <div class="weui-dialog__ft">
	            <a href="javascript:;" onclick="$('#notice_msg').hide();" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
	        </div>
	    </div>
	</div>
	<!--确认发送消息弹层开始-->
	<div class="js_dialog" id="confirm_send_msg" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">确认操作</strong></div>
            <div class="weui-dialog__bd">确定发送此消息吗?</div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default no_send">我再看看</a>
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary yes_send">是的</a>
            </div>
        </div>
    </div>
    <!--确认发送消息弹层结束-->

	<!--消息主体区域开始-->
	<div id="main">
		<div style="text-align:center;margin-top:5%;">
			<img src="__PUBLIC__/Tsnews/img/logo2.png" alt="" style="width:135px;">
		</div>
		<div class="weui-cells__title">催报正文(长度1-200字符)</div>
		<div class="weui-cells weui-cells_form">
		    <div class="weui-cell">
				<div class="weui-cell__bd">
					<textarea class="weui-textarea" name="content"  rows="4" >尊敬的人力资源年报负责人
						系统截止填报日期为 2017年 1月 4日,请您及时完成填报。感谢您对我们工作的支持！</textarea>
					<div class="weui-textarea-counter"><span id="word_count">0</span>/200</div>
				</div>
		    </div>
		</div>

        <!-- 成员数据回显开始 -->
        <div id="user_list" class="weui-btn-area">
        </div>
        <!-- 成员数据回显结束 -->

        <div style="clear: both;"></div>
		<div class="weui-btn-area">
			<a class="weui-btn weui-btn_primary " href="javascript:" id="choosePerson"  >打开通讯录选人</a>
			<a href="javascript:;"  id="showTooltips"  class="weui-btn weui-btn_warn">确定发送催报</a>
		    <a href="javascript:;" id="close_win" onclick="close_window();" class="weui-btn weui-btn_disabled weui-btn_default">关闭</a>
		</div>
	</div>
	<form action="__CONTROLLER__/sendMessage" method="post">
		<input type="hidden" name="content"/>
		<input type="hidden" name="user_list"/>
		<input type="hidden" name="dep_list"/>
		<input type="hidden" name="userid"/>
        <input type="hidden" name="person_type"/>
	</form>

	<div class="weui-footer" style="margin-top:16%;">
        <p class="weui-footer__links">
            <a href="javascript:void(0);" class="weui-footer__link">中国航天-神舟软件</a>
        </p>
        <p class="weui-footer__text">Copyright &copy; 2008-2016</p>
    </div>
	<div style="display: none;" id="person_image_cache"></div>
    <input type="hidden" name="" id="son_ids" value="{$son_ids}">
	<!--加载进度开始-->
	<div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">拼命加载中</p>
        </div>
    </div>
	<!--加载进度结束-->
</body>
<script>
	//通讯录状态记录
    var choose_status = 1;//初始化通讯录成员类型状态 1非全选 2全选
	var selectedUserIds = [];  //已选userID列表
	var selectedDepartmentIds = [];  //已选部门ID列表
	var evalWXjsApi = function(jsApiFun) {
		if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
			jsApiFun();
		} else {
			document.attachEvent && document.attachEvent("WeixinJSBridgeReady", jsApiFun);
			document.addEventListener && document.addEventListener("WeixinJSBridgeReady", jsApiFun);
		}
	}

    //监听打开通讯录按钮事件
	$('#choosePerson').click(function(){
        jcContent();  //检测正文
		openContact(); //调用打开通讯录函数
	});

    //检测正文
    var content = $('textarea[name=content]').val();
    function jcContent(){
        if(content == ''){
            $('#msg_content').html('年报催送内容不能为空!');
            $('#notice_msg').show();
            return false;
        }
    }

    //打开通讯录选人函数
	function openContact() {

		//检测接口可用性
		wx.checkJsApi({
			jsApiList: [
				'openEnterpriseContact',
			],
			success: function (res) {
			}
		});

		evalWXjsApi(function() {
			WeixinJSBridge.invoke("openEnterpriseContact", {
				"groupId": "{$group_id}",    // 必填，管理组权限验证步骤1返回的group_id
				"timestamp": "{$groputime}",    // 必填，管理组权限验证步骤2使用的时间戳
				"nonceStr": "{$groupnonceStr}",    // 必填，管理组权限验证步骤2使用的随机字符串
				"signature": "{$groupsignature}",  // 必填，管理组权限验证步骤2生成的签名
				"params" : {
					'departmentIds' : [{$zbmid}],    // 非必填，可选部门ID列表（如果ID为0，表示可选管理组权限下所有部门）
					'tagIds' : [0],    // 非必填，可选标签ID列表（如果ID为0，表示可选所有标签）
					'userIds' : [{$z_user}],    // 非必填，可选用户ID列表
					'mode' : 'multi',    // 必填，选择模式，single表示单选，multi表示多选
					'type' : ['department','user'],    // 必填，选择限制类型，指定department、tag、user中的一个或者多个
					'selectedDepartmentIds' : selectedDepartmentIds,    // 非必填，已选部门ID列表
					'selectedTagIds' : [],    // 非必填，已选标签ID列表
					'selectedUserIds' : selectedUserIds,    // 非必填，已选用户ID列表
				},
			}, function(res) {
				if (res.err_msg.indexOf('function_not_exist') > -1) {
					alert('您的微信版本过低请先升级');
				} else if (res.err_msg.indexOf('openEnterpriseContact:fail') > -1) {
					return;
				}
                var zbm = {$zbmids};
                var zbmuser = {$zbmuser};
				var result = JSON.parse(res.result);    // 返回字符串，开发者需自行调用JSON.parse解析
                $('#user_list').html();  //初始化数据
				var selectAll = result.selectAll;     // 是否全选（如果是，其余结果不再填充）
				if (!selectAll)
				{
					var selectedDepartmentList = result.departmentList;    // 已选的部门列表
                    var bm_html = '';
					for (var i = 0; i < selectedDepartmentList.length; i++) {
						var department = selectedDepartmentList[i];
						var departmentId = department.id;    // 已选的单个部门ID
                        if(zbm.indexOf(departmentId) > -1) {
                            selectedDepartmentIds[i] = departmentId;
                            var departemntName = department.name;    // 已选的单个部门名称
                            bm_html += "<div class='dep'>" + departemntName + "<i style='border-radius: 20px; position: absolute;top: -.6em;right: -.4em;'><img onclick='rmdepid(this);' depid='" + departmentId + "' src='__PUBLIC__/Tsnews/img/remove.png' style='width:19px;height:19px;'/></i></div>";
                        }
                    }
                    $('#user_list').html(bm_html);
					var selectedUserList = result.userList;    // 已选的成员列表
                    var member_html = '';
					for (var i = 0; i < selectedUserList.length; i++) {
                        var user = selectedUserList[i];
                        var userId = user.id;    // 已选的单个成员ID
                        if (zbmuser.indexOf(userId) > -1) {
                            selectedUserIds[i] = userId;
                            var image = getImage(userId);
                            var userName = user.name;    // 已选的单个成员名称
                            userName = userName.substr(0, 3);
                            member_html += "<span class='member'><img src='" + image + "'/><br/>" + userName + "<i style='border-radius: 20px; position: absolute;top: -.4em;right: -.4em;'><img  onclick='rmuserid(this);' userid='" + userId + "' src='__PUBLIC__/Tsnews/img/remove.png' style='width:19px;height:19px;'/></i></span>";
                        }
                    }
                    $('#user_list').html($('#user_list').html()+member_html);
				}else{
                    choose_status = 2;
                    var da_html = '<div style="text-align:center;"><i class="weui-icon-success"></i>当前已选中全部成员!</div>';
                    $('#user_list').html(da_html);
                }
                if(selectedUserIds.length==0 && selectedDepartmentIds.length==0 && choose_status==1 ){
                    $('#choosePerson').html('打开通讯录选人');
                }else{
                    $('#choosePerson').html('+ 继续添加');
                }
			})
		});
	}

	//获取成员头像函数
    var userinfo = {$userinfo};
    function getImage(userid){
        for(var i in userinfo){
            if(i == userid){
                return userinfo[i].avatar;
            }
        }
    }

	//删除已选部门函数
	function rmdepid(a){
		var depid = $(a).attr('depid');
		for(var i=0;i<selectedDepartmentIds.length;i++){
			if(selectedDepartmentIds[i] == depid){
				selectedDepartmentIds.splice($.inArray(depid,selectedDepartmentIds),1);
			}
		}
		$(a).parent().parent().remove();
        chuhtml();
	}

	//删除已选成员函数
	function rmuserid(a){
		var userid = $(a).attr('userid');
		for(var i=0;i<selectedUserIds.length;i++){
			if(selectedUserIds[i] == userid){
				selectedUserIds.splice($.inArray(userid,selectedUserIds),1);
			}
		}
		$(a).parent().parent().remove();
        chuhtml();
	}

    //初始化选人按钮
    function chuhtml(){
        if(selectedUserIds==0 && selectedDepartmentIds.length==0){
            $('#choosePerson').html('打开通讯录选人');
        }
    }

    //监听发送消息事件
    $('#showTooltips').click(function(){
        jcContent();  //检测正文
        //检测是否选人
        if(selectedUserIds.length==0 && selectedDepartmentIds.length==0 && choose_status==1 ){
            $('#msg_content').html('您还没有选择消息接收人呢！');
            $('#notice_msg').show();
            return false;
        };
        //检测正文文字数量是否超标
        if(content.length>200){
            $('#msg_content').html('消息正文最多500个字符!');
            $('#notice_msg').show();
            return false;
        }
        //整理消息
        $('input[name=content]').val(content.trim());//正文内容
        $('input[name=userid]').val({$userid});//消息发送人
        $('input[name=user_list]').val(selectedUserIds.join());//选中成员列表
        $('input[name=dep_list]').val(selectedDepartmentIds.join());//选中部门列表
        $('input[name=person_type]').val(choose_status);//通讯录选中类型
        //发送消息弹出层开启
        $('#confirm_send_msg').show();
    })
    //确认发送消息
    $('.yes_send').bind('click',function(){
        $('form').submit();
        $('#confirm_send_msg').hide();
    });

    //取消发送消息
    $('.no_send').bind('click',function(){
        $('#confirm_send_msg').hide();
    });

    //文本统计
    $('textarea[name=content]').bind('input',function(){
        var len = $(this).val().length;
        $('#word_count').html(200 - len);
    });
</script>
</html>